<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <div th:replace="./include/home-head-include"></div>
</head>

<body>

<div class="container">
    <div th:replace="./include/home-nav-include"></div>
    <div align="center">
        <font size="20" color="red">图书详情</font>
    </div>
    <div class="row">
        <div class="col">
            <table class="table table-striped">
                <tr align="center">
                    <th  scope="col">书名</th>
                </tr>
                <tbody>
                <tr th:each="book,start:${book}" align="center">
                    <td><img height="500px" th:src="${book.image}" alt=""></td>
                    <!--<td th:text="${book.bookname}"></td>-->
                    <!--<td th:text="${book.author}"></td>-->
                </tr>
                <tr align="center">
                    <th  scope="col">作者</th>
                </tr>
                <tr th:each="book,start:${book}" align="center">
                    <td th:text="${book.author}"></td>
                </tr>
                <tr align="center">
                    <th  scope="col">价格</th>
                </tr>
                <tr th:each="book,start:${book}" align="center">
                    <td th:text="${book.prize}"></td>
                </tr>
                <tr align="center">
                <th  scope="col">剩余数量</th>
                </tr>
                <tr th:each="book,start:${book}" align="center">
                    <td th:text="${book.count}"></td>
                </tr>
                <tr align="center">
                    <th  scope="col">操作</th>
                </tr>
                <tr th:each="book,start:${book}" align="center">
                <td align="center">
                    <a href="javascript:void(0)" th:if="${session.username}!=null" class="borrowButton"
                       th:bookId="${book.bookId}">借阅</a>
                    <a class="flex-sm-fill text-sm-center nav-link" th:if="${session.username}==null"
                       th:href="@{/login}">登录</a>

                </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
<script>

    $(".borrowButton").click(function () {
        var bookId = $(this).attr("bookId");
        console.log(bookId);
        $.ajax({
            url: "/borrows",
            method: "post",
            data: {
                "bookId": bookId
            }, success: function (e) {
                console.log(e);
                if (e.code === 200) {
                    alert("借阅成功，前往借阅列表查看");
                } else {
                    alert(e.message);
                }
            }
        })
    })
</script>
</body>
</html>